<!--左侧表单拖拽时触发,拖动一个表单触发一次 -->
<template>
  <span>
    <template v-if="element.type == 'input'">
             <el-input
                     v-model="element.options.defaultValue"
                     :style="blockStyle(isTable,'100%')"
                     :placeholder="element.options.placeholder"
                     :disabled="element.options.disabled"

             ></el-input>
    </template>
    <template v-if="element.type == 'dialog'">


       <el-button :disabled="element.options.disabled" type="primary" :class="element.options.icon">{{element.options.btnName}}</el-button>
    </template>
    <template v-if="element.type == 'userDialog'">
       <el-button type="primary" :disabled="element.options.disabled" :class="element.options.icon">{{element.options.btnName}}</el-button>
    </template>

    <template v-if="element.type == 'textarea'">
      <el-input type="textarea" :rows="1"
                v-model="element.options.defaultValue"
                :style="blockStyle(isTable,'100%')"
                :disabled="element.options.disabled"
                :placeholder="element.options.placeholder"
      ></el-input>
    </template>

      <template v-if="element.type == 'iframe'">
      <iframe frameborder=0
              scrolling=auto
              :src="element.options.src"
              :style="blockStyle(isTable,'100%')"
              :height="element.options.height"

      ></iframe>

    </template>



    <template v-if="element.type == 'number'">
      <el-input-number
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :controls-position="element.options.controlsPosition"
              :style="blockStyle(isTable,'100%')"
      ></el-input-number>
    </template>

    <template v-if="element.type == 'radio'">
      <el-radio-group v-model="element.options.defaultValue"
                      :style="blockStyle(isTable,element.options.options)"
      >
        <el-radio
                :style="{display: element.options.inline ? 'inline-block' : 'block'}"
                :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index"
                :border="element.options.border"
                :disabled="element.options.disabled"
        >
          {{element.options.showLabel ? item.label : item.value}}
        </el-radio>
      </el-radio-group>
    </template>

     <template v-if="element.type == 'checkbox'">

        <el-checkbox-group v-model="element.options.defaultValue"
                           :style="{width: isTable ? '100%' : element.options.width}"
        >
        <el-checkbox
          :style="{display: element.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index"
        >
          {{element.options.showLabel ? item.label : item.value}}
        </el-checkbox>
      </el-checkbox-group>


    </template>

    <template v-if="element.type == 'time'">
      <el-time-picker
              v-model="element.options.defaultValue"
              :is-range="element.options.rangeAble"
              :placeholder="element.options.placeholder"
              :start-placeholder="element.options.startPlaceholder"
              :end-placeholder="element.options.endPlaceholder"
              :readonly="element.options.readonly"
              :disabled="element.options.disabled"
              :editable="element.options.editable"
              :clearable="element.options.clearable"
              :arrowControl="element.options.arrowControl"
              :style="{width:  '100%' }"
      >
      </el-time-picker>
    </template>

    <template v-if="element.type == 'date'">
      <el-date-picker
              v-model="element.options.defaultValue"
              :type="element.options.type"
              :is-range="element.options.rangeAble"
              :placeholder="element.options.placeholder"
              :start-placeholder="element.options.startPlaceholder"
              :end-placeholder="element.options.endPlaceholder"
              :readonly="element.options.readonly"
              :disabled="element.options.disabled"
              :editable="element.options.editable"
              :clearable="element.options.clearable"
              :style="blockStyle(isTable,'100%')"
      >
      </el-date-picker>
    </template>

    <template v-if="element.type == 'rate'">
      <el-rate v-model="element.options.defaultValue"
               :max="element.options.max"
               :style="blockStyle(isTable,'100%')"
               :disabled="element.options.disabled"
               :allow-half="element.options.allowHalf"
      ></el-rate>
    </template>
    <template v-if="element.type == 'tag'">

      <el-tag v-model="element.options.defaultValue" :size="element.options.radioSize"
              v-for="(tag, tagsIndex) in element.options.options"
              :key="tagsIndex"
              :type="tag.value">
        {{tag.label}}
      </el-tag>

    </template>
    <template v-if="element.type == 'link'">

  <el-link :href="element.options.href"
           v-model="element.options.defaultValue"
           :target="element.options.target">{{element.options.defaultValue}}</el-link>

    </template>
    <template v-if="element.type == 'badge'">

  <el-badge :value="element.options.defaultValue" :max="element.options.max" :is-dot="element.options.dot"
            v-model="element.options.defaultValue" class="item">
</el-badge>

    </template>
    <template v-if="element.type == 'inputNumber'">

<el-input-number v-model="element.options.defaultValue" :max="element.options.max" :min="element.options.min"
                 :step="element.options.step"
                 :size="element.options.radioSize"
                 :disabled="element.options.disabled"

>
</el-input-number>
    </template>
    <template v-if="element.type == 'h4'">
    <h4>{{element.options.defaultValue}}</h4>
    </template>

<template v-if="element.type == 'p'">
    <p>{{element.options.defaultValue}}</p>
    </template>
<template v-if="element.type == 'small'">
    <small>{{element.options.defaultValue}}</small>
    </template>
<template v-if="element.type == 'mark'">
    <mark>{{element.options.defaultValue}}</mark>
    </template>


<template v-if="element.type == 'del'">
    <del>{{element.options.defaultValue}}</del>
    </template>
    <template v-if="element.type == 'u'">
    <u>{{element.options.defaultValue}}</u>
    </template>
      <template v-if="element.type == 'em'">
    <em>{{element.options.defaultValue}}</em>
    </template>


      <template v-if="element.type == 'strong'">
    <strong>{{element.options.defaultValue}}</strong>
    </template>
      <template v-if="element.type == 'icon'">
    <i :class="element.options.icon">{{element.options.defaultValue}}</i>
    </template>
      <template v-if="element.type == 'steps'">

          <el-steps :active="element.options.defaultValue"
                    v-model="element.options.defaultValue"
                    :finish-status="element.options.finishStatus"
                    :align-center="element.options.alignCenter"
                    :simple="element.options.simple"
                    :process-status="element.options.processStatus"
                    :direction="element.options.direction"
          >


	  <el-step v-for="item in element.options.stepItemOptions" :title="item.value" :key="item.value">
	</el-step>
</el-steps>
    </template>



      <template v-if="element.type == 'breadcrumb'">
   <el-breadcrumb :separator="element.options.separator">

          <el-breadcrumb-item v-for="item in element.options.breadcrumbItemOptions" :key="item.value"
                              :value="item.value">
        {{item.value}}
         </el-breadcrumb-item>


</el-breadcrumb>

    </template>



    <template v-if="element.type == 'progress'">
 <el-progress
         :percentage="element.options.percentage"
         :type="element.options.progressType"
         :status="element.options.status"
         :show-text="element.options.showText"
         :stroke-width="element.options.strokeWidth"
         :text-inside="element.options.textInside"

 ></el-progress>


    </template>
    <template v-if="element.type == 'dateCalendar'">

<el-calendar
        :disabled="element.options.disabled"
        v-model="element.options.defaultValue"


>
</el-calendar>


    </template>


    <template v-if="element.type == 'color'">
      <el-color-picker
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :show-alpha="element.options.showAlpha"
              :style="blockStyle(isTable,'100%')"
      ></el-color-picker>
    </template>

       <template v-if="element.type == 'dividers'">
      <el-divider></el-divider>
    </template>

       <template v-if="element.type == 'alert'">
    <el-alert :title="element.options.title" :closable="element.options.closable"
              :show-icon="element.options.showIcon"
              :effect="element.options.item"
              :type="element.options.alertType"
              :close-text="element.options.closeText"
              :center="element.options.center"
    >{{element.options.defaultValue}}</el-alert>
    </template>









    <template v-if="element.type == 'select'">
      <el-select
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :multiple="element.options.multiple"
              :clearable="element.options.clearable"
              :placeholder="element.options.placeholder"
              :style="blockStyle(isTable,'100%')"
      >
        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value"
                   :label="element.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>

    <template v-if="element.type=='switch'">
      <el-switch
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :style="blockStyle(isTable,'100%')"
      >
      </el-switch>
    </template>
    <template v-if="element.type=='processInfo'">
        <div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px"
     y="0px" viewBox="0 0 510.2 49.1" style="enable-background:new 0 0 510.2 49.1;" xml:space="preserve">

<rect id="XMLID_1_" x="0.5" y="0.5" class="st0" width="509" height="24"/>
<rect id="XMLID_3_" x="0.5" y="24.5" class="st1" width="509" height="24"/>
<path id="XMLID_2_" class="st2"
      d="M401.3,48.5L401.3,48.5c-0.1,0-0.2-0.1-0.2-0.2v-46c0-0.1,0.1-0.2,0.2-0.2l0,0  c0.1,0,0.2,0.1,0.2,0.2v46C401.5,48.4,401.4,48.5,401.3,48.5z"/>
<path id="XMLID_6_" class="st2"
      d="M167.1,48.5L167.1,48.5c-0.1,0-0.2-0.1-0.2-0.2v-46c0-0.1,0.1-0.2,0.2-0.2l0,0  c0.1,0,0.2,0.1,0.2,0.2v46C167.4,48.4,167.3,48.5,167.1,48.5z"/>
<path id="XMLID_9_" class="st2"
      d="M258.1,48.5L258.1,48.5c-0.1,0-0.2-0.1-0.2-0.2v-46c0-0.1,0.1-0.2,0.2-0.2l0,0  c0.1,0,0.2,0.1,0.2,0.2v46C258.4,48.4,258.3,48.5,258.1,48.5z"/>
<text id="XMLID_4_" transform="matrix(1 0 0 1 64.1081 15.5519)" class="st3 st4 st5">节点名称</text>
<text id="XMLID_107_" transform="matrix(1 0 0 1 196.6081 15.5519)" class="st3 st4 st5">执行人</text>
<text id="XMLID_108_" transform="matrix(1 0 0 1 319.6081 15.5519)" class="st3 st4 st5">审批意见</text>
<text id="XMLID_109_" transform="matrix(1 0 0 1 433.1081 15.5519)" class="st3 st4 st5">接受时间</text>

<text id="XMLID_8_" transform="matrix(1 0 0 1 17.922 39.5519)" class="st3 st4 st5">与财务审批流程相关的其他流程</text>
<text id="XMLID_7_" transform="matrix(1 0 0 1 174.922 39.5519)" class="st3 st4 st5">盘古（财务经理）</text>
<text id="XMLID_10_" transform="matrix(1 0 0 1 270.9221 39.5519)" class="st3 st4 st5">盘古BPM集团-盘古-同意</text>
<text id="XMLID_11_" transform="matrix(1 0 0 1 418.9221 39.5519)" class="st3 st4 st5">2019-11-12</text>
</svg>
  </div>
    </template>

    <template v-if="element.type=='slider'">
      <el-slider
              v-model="element.options.defaultValue"
              :min="element.options.min"
              :max="element.options.max"
              :disabled="element.options.disabled"
              :step="element.options.step"
              :show-input="element.options.showInput"
              :range="element.options.range"
              :showTooltip="element.options.showTooltip"

              :style="blockStyle(isTable,'100%')"></el-slider>
    </template>
      <template v-if="element.type=='btn'">
    <el-button :size="element.options.radioSize" :style="{'margin-left':element.options.marginLeft}"
               :type="element.options.type"
               :plain="element.options.plain"
               :round="element.options.round"
               :circle="element.options.circle"
               :loading="element.options.loading"
               :icon="element.options.icon"

    >{{element.options.name}}</el-button>
    </template>


    <template v-if="element.type=='imgupload'">
      <image-upload
              v-model="element.options.defaultValues"
              :disabled="element.options.disabled"
              :style="{'width': isTable ? '100%' : element.options.width}"
              :width="element.options.size.width"
              :height="element.options.size.height"
              token="xxx"
              domain="xxx"
      >
      </image-upload>
    </template>
      <!-- 文件上传的表单 -->
  <template v-if="element.type=='fileUpload'">
       <fm-upload

               :disabled="element.options.disabled"
               :style="{'width': isTable ? '100%' : element.options.width}"
               :width="element.options.sizes.width"
               :height="element.options.sizes.height"
               :token="element.options.token"
               :domain="element.options.domain"
               :multiple="element.options.multiple"
               :length="element.options.length"
               :is-qiniu="element.options.isQiniu"
               :is-delete="element.options.isDelete"
               :min="element.options.min"
               :is-edit="element.options.editable"
               :action="element.options.action"
               :supportedTypeStr="element.options.supportedTypeStr">
      </fm-upload>
      <!--      </fm-upload>-->
    </template>
 <template v-if="element.type == 'cascader'">

 </template>


    <template v-if="element.type == 'editor'">
      <fm-editor
              v-model="element.options.defaultValue"
              :width="isTable ? '100%' : element.options.width"
              :height="element.options.height"
              :disabled="element.options.disabled"

      >

      </fm-editor>
    </template>

    <template v-if="element.type=='blank'">
      <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">自定义区域</div>
    </template>

    <template v-if="element.type == 'text'">


     <span v-if="element.options.tip.length>0">

          <el-tooltip class="item" effect="dark" :content="element.options.tip" placement="right-end">
                                <span :style="{'font-weight':element.options.bold?'bold':'normal',color:element.options.color,fontSize:(element.options.fontSize+'px')}">{{element.options.defaultValue}}</span>



    </el-tooltip>
        </span>
      <span v-else>
                                <span :style="{'font-weight':element.options.bold?'bold':'normal',color:element.options.color,fontSize:(element.options.fontSize+'px')}">{{element.options.defaultValue}}</span>


      </span>
    </template>
    <template v-if="element.type == 'distpicker'">
<v-distpicker province="省" city="市" area="区"></v-distpicker>
    </template>
    <template v-if="element.type == 'vue2Editor'">
  <vue-editor v-model="element.options.defaultValue"/>
    </template>
  </span>
</template>

<script>
    import FmUpload from './Upload'
    import ImageUpload from './widget/image/index'
    import FmEditor from './Editor/tinymce'
    import VDistpicker from 'v-distpicker'
    import {VueEditor} from "vue2-editor";

    export default {
        components: {
            FmUpload,
            FmEditor,
            VDistpicker,
            VueEditor,
            ImageUpload
        },
        props: ['element', 'isTable'],
        methods: {
            blockStyle(ele, styleVal) {

                if (ele == 'block') {
                    //console.log(2222);
                    return "width:90%;margin-left:10px";
                } else {
                    if (ele == 'true') {
                        return "width:100%";
                    } else {
                        return "width:" + styleVal + 'px';
                    }
                }

            },
        }
    }
</script>

<style type="text/css">
    .st0 {
        fill: #F9F9F9;
        stroke: #F9F9F9;
        stroke-miterlimit: 10;
    }

    .st1 {
        fill: #FFFFFF;
        stroke: #F9F9F9;
        stroke-miterlimit: 10;
    }

    .st2 {
        fill: #FFFFFF;
        stroke: #F9F9F9;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
    }

    .st3 {
        opacity: 0.65;
        fill: #040000;
    }

    .st4 {
        font-family: 'MicrosoftYaHei';
    }

    .st5 {
        font-size: 10px;
    }
</style>
